
<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label" style="width:120px;">分类</label>
        <div class="layui-input-inline type2">
            <input type="hidden" value="" class="type_value">
            <select name="type" id="type_selected" class="type" lay-filter="type">
                <option value="">请选择</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item type_sub1">
        <label class="layui-form-label" style="width:120px;">话题选择</label>
        <div class="layui-input-inline type_sub2">
            <select name="type_sub" id="type_sub" class="type_sub" lay-filter="type_sub">

            </select>
        </div>
        <div class="layui-form-mid layui-word-aux">请先选择分类</div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label" style="width:120px;">视频标题</label>
        <div class="layui-input-inline">
            <textarea name="video_title" placeholder="请输入视频标题" class="layui-textarea video_title"style="width:500px;"></textarea>
        </div>
        <div class="layui-form-mid layui-word-aux" style="margin-left:420px;">最大字数为30字</div>
    </div>
    <!-----------------------------------------------------视频上传开始---------------------------------------------------------------------------->
    <div class="layui-row">
        <div class="layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:120px;">添加完整推荐视频</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" id="test1"><i class="layui-icon"></i>上传视频</button>
                    <input type="text" name="" class="wenzi1" style="width:300px;height:35px;margin-left:20px;display:none;">
                    <span class="up1" style="width:300px;height:35px;margin-left:20px;display:none;color:red;"></span>
                    <input type="hidden" name="video_url1" class="video_url1">
                </div>
            </div>
            <div style="width:80%;height:240px;border: 1px solid lightgreen;margin-left:50px;">
                <video controls="controls" src="" style="width:100%;height:100%;" class="video1" id="video1"></video>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:150px;">添加无声有字幕视频</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" id="test2"><i class="layui-icon"></i>上传视频</button>
                    <input type="text" name="" class="wenzi2" style="width:300px;height:35px;margin-left:20px;display:none;">
                    <span class="up2" style="width:300px;height:35px;margin-left:20px;display:none;color:red;"></span>
                    <input type="hidden" name="video_url" class="video_url2">
                </div>
            </div>
            <div style="width:80%;height:240px;border: 1px solid lightgreen;margin-left: 50px;">
                <video controls="controls" src="" style="width:100%;height:100%;" class="video2" id="video2"></video>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:150px;">添加无声无字幕视频</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" id="no_music_zimu_video1"><i class="layui-icon"></i>上传视频</button>
                    <input type="text" name="" class="no_music_zimu_video1" style="width:300px;height:35px;margin-left:20px;display:none;">
                    <span class="no_music_zimu_video2" style="width:300px;height:35px;margin-left:20px;display:none;color:red;"></span>
                    <input type="hidden" name="video_url" class="no_music_zimu_video3">
                </div>
            </div>
            <div style="width:80%;height:240px;border: 1px solid lightgreen;margin-left:50px;">
                <video controls="controls" src="" style="width:100%;height:100%;" class="no_music_zimu_video4" id="no_music_zimu_video2"></video>
            </div>
        </div>
    </div>
    <!-----------------------------------------------------视频上传结束-------------------------------------------------------------------------------------->
    <br>
    <div class="layui-row">
        <div class="layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:120px;">添加背景音乐</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" id="test3"><i class="layui-icon"></i>上传音频</button>
                    <input type="text" name="" class="wenzi3" style="width:300px;height:35px;margin-left:20px;display:none;">
                    <span class="up3" style="width:300px;height:35px;margin-left:20px;display:none;color:red;"></span>
                    <input type="hidden" name="video_url" class="video_url3">
                </div>
            </div>
            <div style="width:80%;height:240px;border: 1px solid lightgreen;margin-left:50px;">
                <audio controls="controls" src="" style="width:100%;height:100%;" class="video3" id="video3"></audio>
            </div>
        </div>
    </div>
    <br>
    <!-------------------------------------------------------------------封面上传开始------------------------------------------------------------------------------------------>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width:120px;">添加横屏封面图</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="test4"><i class="layui-icon"></i>上传横屏封面</button>
            <input type="text" name="" class="wenzi4" style="width:300px;height:35px;margin-left:20px;display:none;">
            <span class="up4" style="width:300px;height:35px;margin-left:20px;display:none;color:red;"></span>
            <input type="hidden" name="video_url" class="video_url4">
        </div>
    </div>
    <div style="width: 100px;height: 100px;border: 1px solid lightgreen;margin-left: 150px;float: left;">
        <img src="" style="width: 100px;height: 100px;" class="big_img">
    </div>
    <span style="margin-left: 10px;color: gainsboro;">建议尺寸528*296，必填</span>
    <div class="layui-form-item"></div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width:120px;">添加竖屏封面图</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="test5"><i class="layui-icon"></i>上传竖屏封面</button>
            <input type="text" name="" class="wenzi5" style="width:300px;height:35px;margin-left:20px;display:none;">
            <span class="up5" style="width:300px;height:35px;margin-left:20px;display:none;color:red;"></span>
            <input type="hidden" name="video_url" class="video_url5">
        </div>
    </div>
    <div style="width: 100px;height: 100px;border: 1px solid lightgreen;margin-left: 150px;float: left;">
        <img src="" style="width: 100px;height: 100px;" class="small_img">
    </div>
    <span style="margin-left: 10px;color: gainsboro;">建议尺寸240x360</span>
    <div class="layui-form-item"></div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width:120px;">添加分享封面图</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="test6"><i class="layui-icon"></i>上传分享封面</button>
            <input type="text" name="" class="wenzi6" style="width:300px;height:35px;margin-left:20px;display:none;">
            <span class="up6" style="width:300px;height:35px;margin-left:20px;display:none;color:red;"></span>
            <input type="hidden" name="video_url" class="video_url6">
        </div>
    </div>
    <div style="width: 100px;height: 100px;border: 1px solid lightgreen;margin-left: 150px;float: left;">
        <img src="" style="width: 100px;height: 100px;" class="share_img">
    </div>
    <span style="margin-left: 10px;color: gainsboro;">建议尺寸210x168，必填</span>
    <!-------------------------------------------------------------------封面上传结束------------------------------------------------------------------------------------------>
</form>
<!---------------------------------------------------------------------配音参考文字开始------------------------------------------------------------------------------>
<div class="layui-row" style="margin-top: 30px;margin-left: 20px;">
    <div class="layui-col-md10">
        <br>
        <span style="margin-top:20px;margin-bottom:20px;" class="all">添加参考配音文字（选填）</span>
        <table class="layui-table tables">

        </table>
        <table class="layui-table tables2">

        </table>
        <table class="layui-table tables3">

        </table>
        <div>
            <button class="layui-btn add_trs" style="margin-top:20px;margin-right:15px;">新增一行</button>
            <button class="layui-btn delete_all" style="margin-top:20px;margin-right:15px;">全部删除</button>
            <br>
            <button class="layui-btn add_lei" style="margin-top:20px;">新增一类</button>
        </div>
    </div>
</div>
</div>
<!-----------------------------------------------------------------------------配音参考文字结束----------------------------------------------------------------------------------->
<br><br><br>

<div style="float: right;margin-right: 100px;">
    <button class="layui-btn join" style="margin-left: 20px;margin-right: 20px;">加入挑选视频</button>
    <button class="layui-btn save" style="margin-left: 20px;margin-right: 20px;">保存</button>
    <button class="layui-btn back" style="margin-left: 20px;margin-right: 20px;">取消</button>
</div>


<script>
    //    $(".type2").on("click","input",function(){
    //        console.log($(this))
    //    })


    $(".layui-input-inline.type_sub2").click(function(){
        var type_value=$(".type_value").val();
        if(type_value.length==0){
            layer.msg("请先选择分类",{time:2000})
        }
    })

    //保存
    $('.save').click(function(){
        var type=$('.type').val()
        var type_sub=$('.type_sub').val()
        var video_title=$('.video_title').val()
        var video_url1=$('.video_url1').val()
        var video_url2=$('.video_url2').val()
        var video_url3=$('.video_url3').val()
        var video_url4=$('.video_url4').val()
        var share_pic=$('.video_url6').val()
        var no_music_zimu_video=$('.no_music_zimu_video3').val()
        var video_url5=$('.video_url5').val()
        var table1 = $('.tables').find("tr").length;           //判断tables是否为空表格
        var table2= $('.tables2').find("tr").length;           //判断tables2是否为空表格
        var table3= $('.tables3').find("tr").length;           //判断tables3是否为空表格
        if(table1>0){
            var $inputArr1 = $('.tables input');//length = 3
            //3.循环处理input,并定义结果集
            var result1 = [];
            $inputArr1.each(function(){
                //4.将每个input的值放进结果集
                result1.push($(this).val());
            });
            var lines=[result1];
        }
        if(table2>0){
            var $inputArr2 = $('.tables2 input');//length = 3
            //3.循环处理input,并定义结果集
            var result2 = [];
            $inputArr2.each(function(){
                //4.将每个input的值放进结果集
                result2.push($(this).val());
            });
            var lines=[result1,result2];
        }
        if(table3>0){
            var $inputArr3 = $('.tables3 input');//length = 3
            //3.循环处理input,并定义结果集
            var result3 = [];
            $inputArr3.each(function(){
                //4.将每个input的值放进结果集
                result3.push($(this).val());
            });
            var lines=[result1,result2,result3];
        }
        $.ajax({
            type: "post",
            data: {type:type,type_sub:type_sub,video_title:video_title,lines:lines,video_url1:video_url1,video_url2:video_url2,video_url3:video_url3,video_url4:video_url4,video_url5:video_url5,no_music_zimu_video:no_music_zimu_video,share_pic:share_pic},
            dataType: "json",
            url: "<?=base_url("material/material/save_material")?>",
            success: function (res) {
                if(res.code==0){
                    layer.msg(res.msg, {time: 2000},function(){
                        window.location.href="<?=base_url("material/material/index")?>"
                    });
                }else{
                    layer.msg(res.msg, {time: 2000});
                }
            }
        })
    })

    //加入挑选视频
    $('.join').click(function(){
        var type=$('.type').val()
        var type_sub=$('.type_sub').val()
        var video_title=$('.video_title').val()
        var video_url1=$('.video_url1').val()
        var video_url2=$('.video_url2').val()
        var video_url3=$('.video_url3').val()
        var video_url4=$('.video_url4').val()
        var share_pic=$('.video_url6').val()
        var no_music_zimu_video=$('.no_music_zimu_video3').val()
        var video_url5=$('.video_url5').val()
        var table1 = $('.tables').find("tr").length;           //判断tables是否为空表格
        var table2= $('.tables2').find("tr").length;           //判断tables2是否为空表格
        var table3= $('.tables3').find("tr").length;           //判断tables3是否为空表格
        if(table1>0){
            var $inputArr1 = $('.tables input');//length = 3
            //3.循环处理input,并定义结果集
            var result1 = [];
            $inputArr1.each(function(){
                //4.将每个input的值放进结果集
                result1.push($(this).val());
            });
            var lines=[result1];
        }
        if(table2>0){
            var $inputArr2 = $('.tables2 input');//length = 3
            //3.循环处理input,并定义结果集
            var result2 = [];
            $inputArr2.each(function(){
                //4.将每个input的值放进结果集
                result2.push($(this).val());
            });
            var lines=[result1,result2];
        }
        if(table3>0){
            var $inputArr3 = $('.tables3 input');//length = 3
            //3.循环处理input,并定义结果集
            var result3 = [];
            $inputArr3.each(function(){
                //4.将每个input的值放进结果集
                result3.push($(this).val());
            });
            var lines=[result1,result2,result3];
        }
        $.ajax({
            type: "post",
            data: {type:type,type_sub:type_sub,video_title:video_title,lines:lines,video_url1:video_url1,video_url2:video_url2,video_url3:video_url3,video_url4:video_url4,video_url5:video_url5,no_music_zimu_video:no_music_zimu_video,share_pic:share_pic},
            dataType: "json",
            url: "<?=base_url("material/material/save_material_join")?>",
            success: function (res) {
                if(res.code==0){
                    layer.msg(res.msg, {time: 2000},function(){
                        window.location.href="<?=base_url("material/material/join")?>"
                    });
                }else{
                    layer.msg(res.msg, {time: 2000});
                }
            }
        })
    })

    $(function(){
        //layui表单
        layui.use('form', function(){
            var form = layui.form;
            //监听下拉框选择
            form.on('select(type)', function(data){
                //获得监听的值
                var type_id=data.value;
                //给下拉框赋值
                $('.type_value').val(type_id);
                //获得下拉框的值
                var type_ids=$('.type_value').val();
                //有参数传递，则是POST方式,这是下拉框局部刷新
                $(".type_sub").load("<?=base_url("material/material/type_sub")?>",{type_id:type_ids},function(res){
                    //把数据json转化下
                    var arr = JSON.parse(res);
                    if(arr.code==0){
                        var arrs = arr.data;
                        $.each(arrs, function (i, n) {
                            $('.type_sub').append("<option value='" + n.id + "'>" + n.sub_title + "</option>");
                        });
                        layui.form.render('select');
                    }else{
                        layer.msg(arr.msg, {time: 2000},function(){
                            $('.type_sub').append("<option value=''></option>");
                        });
                        layui.form.render('select');
                    }
                });
            });
        });
        //上传视频和音频接口
        layui.use('upload', function() {
            var $ = layui.jquery
                , upload = layui.upload;
            //上传完整视频
            upload.render({
                elem: '#test1'
                , url: "<?=base_url("common/upload/normal_upload")?>"
                , data: {type: "video"}
                ,size:"51200"
                ,accept:'video'
                ,acceptMime: 'video/mp4,video/mov,video/avi'
                , before: function () {
                    $(".up1").text("上传中。。。请等待");
                    $(".up1").show()
                }
                , done: function (res) {
                    if (res.code == 0) {
                        $('.up1').hide();
                        $('.video_url1').val(res.data.file_url);
//                        $('.wenzi1').val(res.data.file_url);
//                        $('.wenzi1').show();
                        $('.video1').attr("src",res.data.file_url)
                        layer.msg(res.msg, {time: 2000});
                    }
                    if (res.code == 1) {
                        layer.msg(res.msg, {time: 2000});
                    }
                }
            })

            //上传无声视频
            upload.render({
                elem: '#test2'
                , url: "<?=base_url("common/upload/normal_upload")?>"
                , data: {type: "video"}
                ,size:"51200"
                ,accept:'video'
                ,acceptMime: 'video/mp4,video/mov,video/avi'
                , before: function () {
                    $(".up2").text("上传中。。。请等待");
                    $(".up2").show()
                }
                , done: function (res) {
                    if (res.code == 0) {
                        $('.up2').hide();
                        $('.video_url2').val(res.data.file_url);
//                        $('.wenzi2').val(res.data.file_url);
//                        $('.wenzi2').show();
                        $('.video2').attr("src",res.data.file_url)
                        layer.msg(res.msg, {time: 2000});
                    }
                    if (res.code == 1) {
                        layer.msg(res.msg, {time: 2000});
                    }
                }
            })

            //上传无声无字幕视频
            upload.render({
                elem: '#no_music_zimu_video1'
                , url: "<?=base_url("common/upload/normal_upload")?>"
//                , url: "https://web-happy.foundao.com/host/api/api/upload_cover.php"
                , data: {type: "video"}
                ,size:"51200"
                ,accept:'video'
                ,acceptMime: 'video/mp4,video/mov,video/avi'
                , before: function () {
                    $(".no_music_zimu_video2").text("上传中。。。请等待");
                    $(".no_music_zimu_video2").show()
                }
                , done: function (res) {
                    if (res.code == 0) {
                        $('.no_music_zimu_video2').hide();
                        $('.no_music_zimu_video3').val(res.data.file_url);
//                        $('.wenzi2').val(res.data.file_url);
//                        $('.wenzi2').show();
                        $('.no_music_zimu_video4').attr("src",res.data.file_url)
                        layer.msg(res.msg, {time: 2000});
                    }
                    if (res.code == 1) {
                        layer.msg(res.msg, {time: 2000});
                    }
                }
            })

            //上传音频
            upload.render({
                elem: '#test3'
                , url: "<?=base_url("common/upload/normal_upload")?>"
                , data: {type: "audio"}
                ,size:"10240"
                ,accept:'audio'
                ,acceptMime: 'audio/mp3,audio/aac'
                , before: function () {
                    $(".up3").text("上传中。。。请等待");
                    $(".up3").show()
                }
                , done: function (res) {
                    if (res.code == 0) {
                        $('.up3').hide();
                        $('.video_url3').val(res.data.file_url);
//                        $('.wenzi3').val(res.data.file_url);
//                        $('.wenzi3').show();
                        $('.video3').attr("src",res.data.file_url)
                        layer.msg(res.msg, {time: 2000});
                    }
                    if (res.code == 1) {
                        layer.msg(res.msg, {time: 2000});
                    }
                }
            })

            //上传大封面
            upload.render({
                elem: '#test4'
                , url: "<?=base_url("common/upload/normal_upload")?>"
                , data: {type: "image"}
                ,acceptMime: 'image/*'
                , before: function () {
                    $(".up4").text("上传中。。。请等待");
                    $(".up4").show()
                }
                , done: function (res) {
                    if (res.code == 0) {
                        $('.up4').hide();
                        $('.video_url4').val(res.data.file_url);
                        $('.wenzi4').val(res.data.file_url);
                        $('.wenzi4').show();
                        $('.big_img').attr("src",res.data.file_url);
                        layer.msg(res.msg, {time: 2000});
                    }
                    if (res.code == 1) {
                        layer.msg(res.msg, {time: 2000});
                    }
                }
            })

            //上传小封面
            upload.render({
                elem: '#test5'
                , url: "<?=base_url("common/upload/normal_upload")?>"
                , data: {type: "image"}
                ,acceptMime: 'image/*'
                , before: function () {
                    $(".up5").text("上传中。。。请等待");
                    $(".up5").show()
                }
                , done: function (res) {
                    if (res.code == 0) {
                        $('.up5').hide();
                        $('.video_url5').val(res.data.file_url);
                        $('.wenzi5').val(res.data.file_url);
                        $('.wenzi5').show();
                        $('.small_img').attr("src",res.data.file_url);
                        layer.msg(res.msg, {time: 2000});
                    }
                    if (res.code == 1) {
                        layer.msg(res.msg, {time: 2000});
                    }
                }
            })

            //上传分享封面
            upload.render({
                elem: '#test6'
                , url: "<?=base_url("common/upload/normal_upload")?>"
                , data: {type: "image"}
                ,acceptMime: 'image/*'
                , before: function () {
                    $(".up6").text("上传中。。。请等待");
                    $(".up6").show()
                }
                , done: function (res) {
                    if (res.code == 0) {
                        $('.up6').hide();
                        $('.video_url6').val(res.data.file_url);
                        $('.wenzi6').val(res.data.file_url);
                        $('.wenzi6').show();
                        $('.share_img').attr("src",res.data.file_url);
                        layer.msg(res.msg, {time: 2000});
                    }
                    if (res.code == 1) {
                        layer.msg(res.msg, {time: 2000});
                    }
                }
            })
        })

        //获取分类
        $.ajax({
            type: "get",
            data: {},
            dataType: "json",
            url: "<?=base_url("material/material/types")?>",
            success: function (res) {
                if(res.code==0){
//                var arr = JSON.parse(res.data);
                    var arr = res.data;
                    $.each(arr, function (i, n) {
                        $('.type').append("<option value='" + n.id + "'>" + n.name + "</option>");
                    });
                    layui.form.render('select');
                }else{
                    layer.msg(res.msg, {time: 2000});
                }
            }
        })

    })

    //添加文字新增一行
    $(".add_trs").click(function(){
        var ids1 = $('.tables').find("tr").length +1 ;      //获得tables的tr标签个数
        var ids2 = $('.tables2').find("tr").length +1 ;     //获得tables2的tr标签个数
        var ids3 = $('.tables3').find("tr").length +1 ;     //获得tables3的tr标签个数
        var id1 = $('.tables').find("tr").length;           //判断tables是否为空表格
        var id2= $('.tables2').find("tr").length;           //判断tables2是否为空表格
        var id3= $('.tables3').find("tr").length;           //判断tables3是否为空表格
//                var a=[ids1,ids2,ids3,id1,id2,id3]
//                alert(a)
        //如果tables和tables2为空，点击新增一行就会新增tables的
        if(id2==0 && id3==0){
            if(ids1<=20){
                var html1=
                    "<tr><td>"+ids1+"</td>"+
                    "<td><input type='text' name='' value='' class='xinzeng_"+ids1+"' style='width:300px;height:30px;'></td>"+
                    "<td><button class='layui-btn wenzi_delete'>删除</button></td></tr>";
                $('.tables').append(html1);
            }else{
                layer.msg("每类最多20行")
            }
        }
        //先新增一类后，tables2就会为1，并且tables3为空，点击新增一行就像tables2新增一行
        if(id2>0 && id3==0 && id1>0){
            if(ids2<=20){
                var html2=
                    "<tr><td>"+ids2+"</td>"+
                    "<td><input type='text' name='' value='' class='xinzeng_"+ids2+"' style='width:300px;height:30px;'></td>"+
                    "<td><button class='layui-btn wenzi_delete'>删除</button></td></tr>";
                $('.tables2').append(html2);
            }else{
                layer.msg("每类最多20行")
            }
        }
        //这是遍历后的
        if(id1>0 && id2>0 && id3>0){
            if(ids3<=20){
                var html3=
                    "<tr><td>"+ids3+"</td>"+
                    "<td><input type='text' name='' value='' class='xinzeng_"+ids3+"' style='width:300px;height:30px;'></td>"+
                    "<td><button class='layui-btn wenzi_delete'>删除</button></td></tr>";
                $('.tables3').append(html3);
            }else{
                layer.msg("每类最多20行")
            }
        }
        $(".tables").unbind("click").on("click",'tr td .wenzi_delete',function(){
            $(this).parent().parent().remove();
        })
        $(".tables1").unbind("click").on("click",'tr td .wenzi_delete',function(){
            $(this).parent().parent().remove();
        })
        $(".tables2").unbind("click").on("click",'tr td .wenzi_delete',function(){
            $(this).parent().parent().remove();
        })
        $(".tables3").unbind("click").on("click",'tr td .wenzi_delete',function(){
            $(this).parent().parent().remove();
        })
    })

    //全部删除
    $(".delete_all").click(function(){
        $('table tr').remove();
    })

    //新增一类
    $(".add_lei").click(function(){
        var tr = $('.tables').find("tr").length;
        var tr2 = $('.tables2').find("tr").length;
        var tr3 = $('.tables3').find("tr").length;
//                var a=[tr,tr2,tr3]
//                alert(a)
        if(tr2==0 && tr>0){
            var html=
                "<tr><td>1</td>"+
                "<td><input type='text' name='' value='' class='xinzeng_' style='width:300px;height:30px;'></td>"+
                "<td><button class='layui-btn wenzi_delete'>删除</button></td></tr>";
            $('.tables2').append(html);
        }else if(tr==0){
            layer.msg("您还没有添加一行文字，请先新增一行")
        }
        if(tr3==0 && tr2>0 && tr>0){
            var html=
                "<tr><td>1</td>"+
                "<td><input type='text' name='' value='' class='xinzeng_' style='width:300px;height:30px;'></td>"+
                "<td><button class='layui-btn wenzi_delete'>删除</button></td></tr>";
            $('.tables3').append(html);
        }else if(tr3>0){
            layer.msg("最多添加三类")
        }
    })

    //返回
    $('.back').click(function(){
        window.history.back(-1);
    })


</script>